<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="src/css/base.css">
    <link rel="stylesheet" href="src/css/style.css">
    <style>
        .header {
            width: 1210px;
            height: 110px;
            margin: 0 auto;

        }

        .header > .left {
            width: 244px;
            height: 110px;
            float: left;
            position: relative;
            margin-right: 24px;
        }

        .header > .left:after {
            content: "";
            display: inline-block;
            height: 60px;
            width: 0;
            border: #c9c8c8 solid 1px;
            position: absolute;
            right: -12px;
            top: 25px;

        }

        .header > .left > a {
            display: inline-block;
            width: 244px;
            height: 110px;
        }

        .header > .txt {
            color: #999;
            font-size: 22px;
            line-height: 110px;
            float: left;
        }

        .header > .right {
            font-size: 16px;
            float: right;
            line-height: 110px;
            color: #666;
        }

        .header > .right span i {
            margin-left: 8px;

        }

        .box {
            width: 100%;
            height: 584px;
            background-color: #262626;
        }

        .box > .backimg {
            position: relative;
            margin: 0 auto;
            width: 1210px;
            height: 584px;
            background: url("src/images/login_background1.jpg") no-repeat;
            background-size: 100% 584px;
        }

        .box .backimg .inner {
            position: absolute;
            right: 40px;
            top: 30px;
            height: 520px;
            width: 400px;
            padding: 0 30px;
            background-color: #fff;
        }

        .box .backimg .inner .inner-title {
            text-align: center;
            width: 340px;
            height: 90px;
            font-size: 22px;
            line-height: 90px;
            position: relative;

        }

        .box .backimg .inner .inner-title:before {
            content: "";
            display: inline-block;
            height: 24px;
            width: 0;
            border: #c9c8c8 solid 1px;
            position: absolute;
            left: 50%;
            top: 32px;
        }

        .box .backimg .inner .inner-title > a:nth-of-type(1) {
            margin-right: 30px;
        }

        .logincode {
            width: 165px;
            height: 165px;
            margin: 0 auto;
            margin-bottom: 30px;
        }

        .inner .txt {
            text-align: center;
            font-size: 14px;
            line-height: 28px;
            width: 340px;
            margin: 0 auto;
            margin-bottom: 30px;
        }

        .txt > p > span {
            color: coral;
        }

        .other {
            width: 340px;
            height: 30px;
            margin: 0 auto;
            line-height: 30px;
            font-size: 14px;
            text-align: center;
            color: #999;
            position: relative;
            margin-bottom: 20px;
        }

        .other:before {
            content: "";
            display: block;
            width: 110px;
            height: 0;
            border: #e9e9e9 solid 1px;
            position: absolute;
            left: 0;
            top: 15px;

        }

        .other:after {
            content: "";
            display: block;
            width: 110px;
            height: 0;
            border: #e9e9e9 solid 1px;
            position: absolute;
            right: 0;
            top: 15px;

        }

        .xqb {
            width: 340px;
            height: 30px;
            margin: 0 auto;

        }

        .xqb li {
            margin-left: 50px;
            width: 30px;
            height: 30px;
            text-align: center;
            float: left;
        }

        .xqb li:nth-of-type(1) {
            margin-left: 70px;
        }

        .inner-box2 {
            width: 340px;
            height: 361px;
            position: absolute;
            right: 30px;
            top: 90px;
            display: none;

            background-color: #fff;
        }

        .inner-box2 > #myform > p > label > input {
            padding-left: 8px;
            width: 340px;
            height: 50px;
            margin-bottom: 8px;
        }

        #myform > #btn {
            width: 340px;
            height: 50px;
            background-color: #333;
            font-size: 18px;
            color: #fff;
            border: none;
            transition: 1s;
            margin-bottom: 10px;
        }

        #myform > #btn:hover {
            background-color: #a60000;
        }

        .inner-title {
            color: #999999;
        }

        .inner-title > a {
            cursor: pointer;
        }

        .inner-title > .current {
            color: black;
        }

    </style>


    <style>
        #uname-error,#pwd-error{
            color: red;
        }
    </style>
    <script src="src/js/lib/require.js" data-main="src/js/login.js"></script>


</head>
<body>
<div class="header">
    <div class="left">
        <a href="#"> <img src="src/images/logo.jpg" alt=""></a>


    </div>
    <div class="txt">
        <i>欢迎登录</i>
    </div>
    <div class="right">
        <span class="icon-phone"><i>客服热线:4008-6767-38</i></span>
    </div>


</div>
<div class="box">
    <div class="backimg">
        <div class="inner">
            <div class="inner-title">
                <a id="sm" class="current">扫码登录</a><a id="zh">账号登录</a>
            </div>
            <div class="inner-box">
                <div class="logincode">
                    <img src="src/images/logincode.png" alt="">
                </div>
                <div class="txt">
                    <p>打开 <span>第五大道APP</span> 扫一扫登录</p>
                    立即注册有惊喜 >
                </div>
                <div class="other">
                    其他登录方式
                </div>
                <ul class="xqb">
                    <li><a href="#"><img src="src/images/wx.png" alt=""></a></li>
                    <li><a href="#"><img src="src/images/qq.png" alt=""></a></li>
                    <li><a href="#"><img src="src/images/wb.png" alt=""></a></li>
                </ul>
            </div>
            <div class="inner-box2">
                <form id="myform">
                    <p><label><input type="text" name="uname" placeholder="邮箱/手机号/账号"></label></p>
                    <p><label><input type="text" name="upwd" placeholder="请输入密码" id="pwd"></label></p>
                    <button id="btn" type="submit">立即登录</button>
                    <p class="last"><label><input style="width: 15px;height: 15px;" type="checkbox" checked>
                        <span>自动登录</span><a href="register.html" style=" margin-left: 100px;
            color: coral;">立即注册</a></label></p>
                </form>
                <div class="other">
                    其他登录方式
                </div>
                <ul class="xqb">
                    <li><a href="#"><img src="src/images/wx.png" alt=""></a></li>
                    <li><a href="#"><img src="src/images/qq.png" alt=""></a></li>
                    <li><a href="#"><img src="src/images/wb.png" alt=""></a></li>
                </ul>
            </div>
        </div>

    </div>

</div>
<div class="pop_bg">
    <div class="popup_main">

        <img src="src/images/foot_popup.png"/>
        <a></a>
    </div>
</div>

<div class="footer">

</div>
</body>
</html>
